$blue: #078DFF;
$red: #F40226;
$green: #05C911;
$white: #ffffff;
$border: #999999;
$grey: #666666;

$border2: #dddddd;
$table-bg: rgba(0,0,0,.075);
$table-color: #333;
.font-blue {
	color: $blue !important;
}
.font-red {
	color: $red !important;
}
.font-green {
	color: $green !important;
}
.font-grey {
	color: $grey !important;
}


* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}
.select-list {
    margin-bottom: 15px;
    text-align: center;
    .select-item {
	    display: inline-block;
	    width: 80px;
	    height: 30px;
	    line-height: 30px;
	    text-align: center;
	    border: 1px solid $border;
	    color: #999999;
	    font-size: 14px;
	    background: $white;
	    cursor: pointer;
	    position: relative;
	    &.active {
    		color: $blue;
    		border: 1px solid $blue;
    		&:after {
    			content: "";
				display: block;
				width: 100%;
				height: 3px;
				background-color: $blue;
				position: absolute;
				bottom: 0;
				left: 0;
    		}
		}
	}
}
.slide-container {
	$height: 40px;
	width: 960px;
	position: relative;
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
		font-size: 14px;
	}
	.slide-content {
		width: 100%;
		height: $height;
		overflow: hidden;
	}
	.slide-scroll {
		width: 0;
		transition: all .5s ease-in-out;
	}
	.slide-item {
		box-sizing: border-box;
		width: 120px;
		height: $height;
		line-height: $height;
		float: left;
		background-color: #E1E1E1;
		text-align: center;
		border: 1px solid $border;
		position: relative;
		cursor: pointer;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space:nowrap;
		&.active {
			background-color: $white;
			color: $blue;
			border: 1px solid $blue;
			&:after {
				content: "";
				display: block;
				width: 100%;
				height: 3px;
				background-color: $blue;
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
	}
	.slide-btn {
		position: absolute;
		top: 0;
		width: 0;
    	height: 0;
		&.slide-prev-btn {
			left: -$height;
			border: $height / 2 solid transparent;
			border-right: $height / 2 solid $border;
			&:hover {
				border-right: $height / 2 solid darken($border, 10);
    		}
		}
		&.slide-next-btn {
			right: -$height;
			border: $height / 2 solid transparent;
			border-left: $height / 2 solid $border;
			&:hover {
				border-left: $height / 2 solid darken($border, 10);
    		}
		}
	}
	.slide-box {
		width: 100%;
		box-sizing: border-box;
		border: 1px solid $border;
		padding: 20px 10px;
		$height: 30px;
		.slide-row {
			display: flex;
		}
		.slide-label {
			width: 100px;
			line-height: $height;
			text-align: right;
			font-size: 16px;
			font-weight: bold;
		}
		.slide-option-list {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			.slide-option {
				line-height: $height;
				box-sizing: border-box;
				width: 200px;
				padding: 0 5px;
				font-size: 14px;
				margin-right: 30px;
				margin-bottom: 20px;
				border: 1px solid #E1E1E1;
				color: #000000;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space:nowrap;
				border-radius: 5px;
				background: $white;
				cursor: pointer;
				box-shadow: 5px 5px 3px $border;
				&.active {
					background-color: $blue;
					color: $white;
					&.bg-red { background-color: $red; }
					&.bg-blue { background-color: $blue; }
					&.bg-green { background-color: $green; }
				}
			}
		}
	}
}
.param-box {
	margin: auto;
}
.market-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid $border2;
    color: $table-color;
    border-spacing: 0;
    font-size: 14px;
    th {
    	$height: 25px;
    	height: $height - 2;
    	line-height: $height;
    	min-width: 100px;
        padding: 4px 10px;
        border: 1px solid $border2;
        background: $table-bg;
        font-weight: bold;
        text-align: center;
        box-sizing: border-box;
    }
    td {
    	box-sizing: border-box;
    	$height: 25px;
    	height: $height;
        border: 1px solid $border2;
        line-height: $height - 2;
        zoom: 1;
        text-align: center;
        word-wrap: break-word;
        word-break: break-all;
        &>.blue {
			color: $blue;
		}
		&>.red {
			color: $red;
		}
		&>.green {
			color: $green;
		}
		&>.grey {
			color: $grey;
		}
		&.bg-red, &.bg-blue, &.bg-green {
			color: $white;
			&>* {
        		color: $white;
        	}
		}
        &.bg-red {
        	background-color: $red !important;
        }
        &.bg-blue {
        	background-color: $blue !important;
        }
        &.bg-green {
        	background-color: $green !important;
        }
        &.border {
        	border: 1px solid #000000;
        }
    }
    tbody {
	    tr:hover {
	    	background: rgba(0,0,0,.05);
	    }
	    tr.count-tr {
	    	background: rgba(0,0,0,.05);
	    }
	}
    &.table-bg {
    	tbody {
    		tr:nth-child(2n) {
    			background: rgba(0,0,0,.05);
    		}
    	}
    }
}

.radio-row {
	width: 100%;
	text-align: center;
	label {
		margin-right: 20px;
		&:last-child {
			margin-right: 0;
		}
	}
	input {
		vertical-align: middle;
		margin-right: 5px;
		margin-top: 0;
	}
}

.bar-td {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	width: 100%;
	height: 100%;
	.bar-bg {
		width: 70%;
		display: flex;
		align-items: center;
	}
	.bar {
		background-color: $blue;
		color: $white;
		height: 60%;
		border-radius: 3px;
		font-size: 12px;
		text-align: right;
	}
	.bar-value {
		width: 30%;
	}
}